{% stylesheet %}
.topic_list .topic_content ul {
  display: grid;
  grid-row-gap: 40px;
  grid-column-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
}

.topic_list .topic_content li {
  text-align: center;
  list-style-type: none;
  overflow: hidden;
}

.topic_list .topic_content li .topic_pic {
  width: 100%;
  display: inline-block;
  margin-bottom: 30px;
}

.topic_list .topic_content li .topic_pic img {
  width: 100%;
}

.topic_list .topic_content li .topic_title {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--title_color);
  font-size: var(--product_font_size);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.topic_list .topic_content li .topic_time {
  color: #999;
  margin-top: 0.8rem;
}

.topic_list .topic_content li .topic_list_detail {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--detail_color);
}

.topic_list .topic_content li .topic_read_more {
  display: inline-block;
  margin-top: 10px;
  text-decoration: underline;
  color: #557FBF;
}

@media screen and (max-width: 767px) {
  .topic_list .topic_content ul {
    grid-template-columns: repeat(1, calc(100%)) !important;
    grid-row-gap: 30px;
  }
  .topic_list .topic_content li .topic_pic {
    margin-bottom: 20px;
  }
}

{% endstylesheet %}



<div class="topic_list container_wrapper" id="topic_list">
	<h1 class="title">{{ lang.topic.title }}</h1>
  <div class="plugin-container-header"></div>

	<div class="topic_content">

    {% assign topic_ids = section.blocks | get_array_values: "topic" | get_array_values: "id" | join: "," %}
    {% if topic_ids != "" %}
    {% get_topics ids={topic_ids} limit={section.settings.pagesize} %}
    <ul>
			{% for topic in topics %}
				{%- if topic.image_alt == "" -%}
					{% assign topic_alt = topic | image_alt:'topic'   %}
				{%- else -%}
					{% assign topic_alt = topic.image_alt %}
				{%- endif -%}
      <li>
				<a class="topic_pic" href="/topics/{{topic.handle}}"><img data-src="{{ topic.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{topic_alt}}"></a>
				<a class="topic_title" href="/topics/{{topic.handle}}">{{topic.title}}</a>
				<div class="topic_list_detail">{{topic.descript|html_content_filter}}</div>
			</li>
			{% endfor %}
		</ul>
		{% include pagination ,{ paginate : topicsPaginate } %}
		{% else %}
		{% if all_topic.topics.size > 0 %}
		<ul>
			{% for topic in all_topic.topics %}
      <li>
				{%- if topic.image_alt == "" -%}
					{% assign topic_alt = topic | image_alt:'topic'   %}
				{%- else -%}
					{% assign topic_alt = topic.image_alt %}
				{%- endif -%}
				<a class="topic_pic" href="/topics/{{topic.handle}}"><img data-src="{{ topic.src|public_front_asset_url }}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{topic_alt}}"></a>
				<a class="topic_title" href="/topics/{{topic.handle}}">{{topic.title}}</a>
				<div class="topic_list_detail">{{topic.descript}}</div>
			</li>
			{% endfor %}
		</ul>
		{% include pagination ,{ paginate : paginate } %}
		{% else %}
		{% include empty , text:lang.general.no_topic %}
		{% endif %}
		{% endif %}
	  <div class="plugin-container-footer"></div>
	</div>
</div>
{% schema %}
{
	"tag": "section",
	"class": "topic_list",
	"is_global": false,
	"name": {
		"zh_CN": "活动专题列表",
		"en_US": "Event Topic list"
	},
	"max_blocks": 80,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input_number",
			"max": 80,
			"min": 8,
			"id": "pagesize",
			"label": {
				"zh_CN": "专题列表每页数量",
				"en_US": "Project list each page number"
			},
			"info": {
				"zh_CN": "默认数量12个;最小8个、最大80个;",
				"en_US": "Default number 12, minimum 8, maximum 80;"
			},
			"refresh": true,
			"default": 12
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "选择专题",
				"en_US": "Select a Topic"
			},
			"type": "topic-item",
			"settings": [
				{
					"type": "card_topic",
					"label": {
						"zh_CN": "专题",
						"en_US": "Topic list"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"refresh": true,
					"id": "topic"
				}
			]
		}
	],
	"default": {
		"settings": {
			"pagesize": 12,
			"refresh": true
		},
		"blocks": [
			{
				"topic": {
					"id": "",
					"title": ""
				},
				"block_type": "topic-item"
			}
		]
	}
}
{% endschema %}